<template>
    <div>
        <select name="sel1" id="sel1" @change="cc"></select>
        <select name="sel2" id="sel2"></select>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            bigclass: "",
            littleclass:"",
            data: [
                {
                    name: "狗狗",
                    cities: ["狗粮", "罐头", "零食", "保健", "医疗", "香波", "用品"]
                },
                {
                    name: "猫猫",
                    cities: ["干粮", "湿粮", "零食", "医疗", "保健", "香波", "用品"]
                },
                {
                    name: "小宠",
                    cities: ["兔兔用品", "仓鼠用品", "龙猫用品", "荷兰猪用品"]
                },
                {
                    name: "水族",
                    cities: ["水族箱", "鱼饲料", "过滤器", "药水", "装饰", "陆龟用品", "蜥蜴用品"]
                }
            ]
        }
    },
    mounted: function() {
        var sel1 = document.getElementById("sel1")
        for (var i = 0; i < this.data.length; i++) {

            var pro = this.data[i];
            var opt = document.createElement("option");
            opt.textContent = pro.name;
            sel1.appendChild(opt);
        }

        //创建第二个下拉列表
        var arr = this.data[0].cities;
        for (var i = 0; i < arr.length; i++) {
            var opt = document.createElement("option");
            opt.textContent = arr[i];
            sel2.appendChild(opt);
        }
    },
    methods: {
        cc: function(e) {
            var sel2 = document.getElementById("sel2")
            sel2.innerHTML = "";
            var index = e.target.selectedIndex;
            var pro = this.data[index];
            var arr = pro.cities;

            for (var i = 0; i < arr.length; i++) {
                var opt = document.createElement("option");
                opt.textContent = arr[i];
                sel2.appendChild(opt);
            }
        },
    }

}
</script>

<style scoped>
select {
    width: 44.3vw;
    height: 5vh;
}

#sel1 {
    margin-left: 5vw;
}
input{
    width: 30%;
}
</style>